<template>
  <div class="app-container">
    <section>
      <div class="contentBox">
        <div class="content">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            class="form"
            label-width="120px"
          >
            <el-form-item
              label="开票信息"
              class="infoTitle"
              style="width: 100%"
            ></el-form-item>
            <el-form-item label="开票方:">
              <el-input
                style="width: 280px"
                v-model="companyName"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item label="抬头类型:" prop="rise_type">
              <el-select
                @change="change($event, 2)"
                style="width: 280px"
                clearable
                v-model="form.rise_type"
                placeholder=""
              >
                <el-option label="公司" value="1"> </el-option>
                <el-option label="个人" value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="抬头名称:"
              prop="rise_name"
              v-if="form.rise_type == 2"
            >
              <el-input
              style="width: 280px"
                v-model="form.rise_name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="抬头名称:" prop="rise_name" v-else>
              <el-select
                filterable
                clearable
                remote
                style="width: 280px"
                v-model="form.rise_name"
                reserve-keyword
                placeholder="请输入关键词"
                :remote-method="remoteMethod"
                @change="selelctName"
                @clear="clearName"
                :loading="loading2"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="纳税人识别号:"
              prop="identification"
              v-if="form.rise_type == 1"
            >
              <el-input
                :readonly="true"
                style="width: 280px"
                v-model="form.identification"
              ></el-input>
            </el-form-item>
            <el-form-item label="发票类型:" prop="type">
              <el-select
                @change="change($event, 1)"
                style="width: 280px"
                clearable
                v-model="form.type"
                placeholder=""
              >
                <!-- <el-option label="增殖税普通专票" value="1"> </el-option> -->
                <el-option label="增值税电子普通发票" value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="公司地址:"
              prop="address"
              v-if="form.type == 1"
            >
              <el-input style="width: 280px" v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="公司电话:" prop="phone" v-if="form.type == 1">
              <el-input style="width: 280px" v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="公司开户行:" prop="bank" v-if="form.type == 1">
              <el-input style="width: 280px" v-model="form.bank"></el-input>
            </el-form-item>
            <el-form-item
              label="开户行账号:"
              prop="account"
              v-if="form.type == 1"
            >
              <el-input style="width: 280px" v-model="form.account"></el-input>
            </el-form-item>
            <el-form-item label="开票金额:">
              <el-input
                style="width: 280px"
                v-model="price"
                readonly
              ></el-input>
            </el-form-item>
            <el-form-item
              style="width: 100%"
              label="发送方式"
              class="infoTitle"
            >
              <span>（以下方式二选一）</span>
            </el-form-item>
            <el-form-item label="发送方式:" prop="send_type">
              <el-select
                style="width: 280px"
                v-model="form.send_type"
                placeholder=""
              >
                <el-option label="邮箱" value="1"> </el-option>
                <el-option label="手机短信" value="2"> </el-option>
                <!-- <el-option label="邮寄" value="3"> </el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item
              prop="send_address"
              style="width: 100%"
               :label="form.send_type == 1 ? '发送邮箱' : '发送手机号' "
            >
              <el-input
                style="width: 280px"
                v-model="form.send_address"
              ></el-input>
            </el-form-item>
            <el-form-item style="width: 100%" label="备注：">
              <el-input style="width: 280px" v-model="form.remarks"></el-input>
            </el-form-item>
          </el-form>
          <div style="margin-top: 40px">
            <el-button style="width: 110px" @click="$router.go(-1)"
              >取消</el-button
            >
            <el-button type="primary" style="width: 110px" @click="save"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  data() {
    return {
      companyName: "",
      form: {
        company_id: "",
        rise_type: "2",
        rise_name: "",
        identification: "",
        type: "2",
        address: "",
        phone: "",
        bank: "",
        account: "",
        send_type: "1",
        send_address: "",
        orders_id: "",
        remarks: "",
      },
      price: "",
      loading2: false,
      options: [],
      rules: {
        rise_type: [
          { required: true, message: "请选择抬头类型", trigger: "change" },
        ],
        rise_name: [
          { required: true, message: "请输入抬头名称", trigger: "blur" },
        ],
        identification: [
          { required: true, message: "请输入纳税人识别号", trigger: "blur" },
        ],
        type: [
          { required: true, message: "请选择发票类型", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入公司地址", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入公司电话", trigger: "blur" }],
        bank: [{ required: true, message: "请输入开户行", trigger: "blur" }],
        account: [
          { required: true, message: "请输入开户账号", trigger: "blur" },
        ],
        send_type: [
          { required: true, message: "请选择发送方式", trigger: "change" },
        ],
        send_address: [
          { required: true, message: "请输入发送地址", trigger: "blur" },
        ],
      },
      time: "",
    };
  },
  created() {
    if (this.$route.query.company_id) {
      this.form.company_id = this.$route.query.company_id;
      this.form.orders_id = this.$route.query.orders_id;
      this.price = this.$route.query.price;
      this.getCompany();
    }
  },
  mounted() {},
  methods: {
    // 纳税识别号查询
    async selelctName(e) {
      console.log(e, "eeeeee");
      if (e && this.form.rise_type == 1) {
        let { code, data } = await this.$Http.searchID({
          id: e,
        });
        if (code) {
          console.log(data);
          this.form.identification = data;
        }
      }
    },
    clearName(e) {
      // 清楚
      this.options = [];
      this.form.rise_name = "";
      this.form.identification = "";
      console.log("清楚");
    },
    visibleChange(E) {
      console.log(E, "0111");
    },
    // 搜索公司
    remoteMethod(E) {
      console.log(E, "EEE");
      if (!E) return (this.options = []);
      this.getList(E);
    },
    async getList(val) {
      this.loading2 = true;
      let { code, data } = await this.$Http.searchName({
        searchText: val,
      });
      this.loading2 = false;
      if (code) {
        if (data.length) {
          data.forEach((ele) => {
            let obj = {
              label: ele.entname,
              value: ele.id,
            };
            this.options.push(obj);
          });
        }
      }
    },
    change(e, type) {
      this.form.rise_name = "";
      this.options = [];
      if (type == 1) {
        if (e == 2) {
          this.form.bank = "";
          this.form.address = "";
          this.form.phone = "";
          this.form.account = "";
        }
      } else {
        if (e == 2) {
          this.form.identification = "";
        }
      }
    },
    async getCompany() {
      let { code, data } = await this.$Http.getCompany({
        id: this.form.company_id,
      });
      this.companyName = data.name;
    },
    //申请开票
    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let { code, data } = await this.$Http.setInvoice(this.form);
          if (code) {
            this.$message.success("申请成功");
            this.$router.go(-1);
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  section {
    .contentBox {
      background: #fff;
      border-radius: 8px;
      padding: 0px 24px 20px;
      min-width: 700px;
      padding-top: 10px;
      min-height: calc(100vh - 165px);
      .title {
        line-height: 70px;
        font-size: 18px;
        font-weight: 600;
        color: #383b40;
        .el-icon-close {
          cursor: pointer;
        }
      }
    }
    .content {
      height: 100%;
      .form {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
    }
  }
}
.wrap {
  display: flex;
  p {
    margin-right: 20px;
    line-height: 35px;
    border-radius: 4px;
    background: #f1f1f1;
    font-size: 16px;
    padding: 0 20px;
  }
}
p {
  margin: 0;
}
.addTxt {
  color: #1890ff;
}
.infoTitle {
  margin-bottom: 10px;
  // width: 85px !important;
  ::v-deep {
    .el-form-item__label {
      width: 85px !important;
      text-align: left;
      font-size: 18px;
      color: #000;
    }
    .el-form-item__content {
      text-align: left;
      margin-left: 0 !important;
    }
  }
}
</style>